<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
		<script src="js/mock.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/database.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/mycourse.css" />
	</head>
	<body>
		<header>
			<img src="img/back.svg" class="back">
			<h1 class="mui-title">我的课程</h1>
			<img src="img/top-chose.png" class="header-right">
		</header>
		<div id="chose">
			<ul id="choseul" class="flex">
				<li class="active">已报名直播</li>
				<li>历史播放/回放</li>
			</ul>
		</div>
		<div class="course-box">
			<div class="flex course">
				<div class="box">
					<div class="shadow"></div>
					<img src="img/play-img.svg">
				</div>
				<div class="text">
					<h3>学习课程标题1 <span class="liveing">直播中</span></h3>
					<p>报名时间：2018.2.27 11:00:25</p>
					<p>主讲：陈安之老师</p>
				</div>
				<label>缴费成功</label>
				<button class="getin" type="button">进入</button>
			</div>
			<div class="flex course">
				<div class="box">
					<div class="shadow"></div>
					<img src="img/play-img.svg">
				</div>
				<div class="text">
					<h3>学习课程标题1 <span class="liveing">直播中</span></h3>
					<p>报名时间：2018.2.27 11:00:25</p>
					<p>主讲：陈安之老师</p>
				</div>
				<label>缴费成功</label>
				<button class="getin" type="button">进入</button>
			</div>
		</div>
		<div class="course-box">
			<div class="flex course">
				<div class="box">
					<div class="shadow"></div>
					<img src="img/play-img.svg">
				</div>
				<div class="text">
					<h3>学习课程标题1</h3>
					<p>报名时间：2018.2.27 11:00:25</p>
					<p>主讲：陈安之老师</p>
				</div>
				<button class="getin" type="button">回放</button>
			</div>
			<div class="flex course">
				<div class="box">
					<div class="shadow"></div>
					<img src="img/play-img.svg">
				</div>
				<div class="text">
					<h3>学习课程标题1</h3>
					<p>报名时间：2018.2.27 11:00:25</p>
					<p>主讲：陈安之老师</p>
				</div>
				<button class="getin" type="button">回放</button>
			</div>
		</div>
		<div class="bottom-menu">
			<ul class="space-around">
				<li id="home"><img src="img/home.svg" ><p>首页</p></li>
				<li><img src="img/classify.svg" ><p>分类</p></li>
				<li class="sactive"><span id="sp">文体活动</span><p>报名</p></li>
				<li><img src="img/shopping.svg" ><p>购物车</p></li>
				<li><img src="img/my.svg" ><p>我的</p></li>
			</ul>
		</div>
	</body>
	<script src="js/resultbank.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		function tab(){ 
			let box = document.getElementsByClassName('course-box');
			let oul = document.getElementById('choseul');
			let oli = oul.getElementsByTagName('li');
			let n = 0;
			box[n].style.display='block'
			for(let i=0;i<oli.length;i++){
				oli[i].index=i;
				oli[i].addEventListener('touchend',function(){
					oli[n].classList.remove('active');
					this.classList.add('active');
					box[n].style.display='none';
					box[this.index].style.display='block';
					n=this.index
				})
			}
		}
		tab()
	</script>
</html>
